<template>
  <div class="tarot-container">
    <!-- 神秘背景效果 -->
    <div class="mystic-bg">
      <div class="stars" />
      <div class="twinkling" />
      <div class="clouds" />
    </div>
    
    <!-- 页面标题 -->
    <h1 class="tarot-title">神秘塔罗</h1>
    
    <!-- 引导文字 -->
    <p class="tarot-guide">请用心选择一张牌，它将揭示你的命运...</p>
    
    <!-- 卡片展示区 -->
    <div class="cards-container">
      <div 
        v-for="(card, index) in tarotCards"
        :key="index"
        class="tarot-card"
        :class="{ 
          'is-selected': selectedCard === index,
          'is-flipped': card.isFlipped,
        }"
        @click="selectCard(index)"
      >
        <div class="card-inner">
          <!-- 卡片背面 -->
          <div class="card-back">
            <div class="card-pattern" />
            <div class="card-symbol" />
          </div>
          
          <!-- 卡片正面 -->
          <div class="card-front" :data-index="index + 1">
            <div class="card-content" :style="getCardStyle(index)">
              <div class="card-icon" />
              <div class="card-title">{{ card.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 卡片解释面板 -->
    <div class="card-reading" v-if="readingVisible">
      <h2 class="reading-title">{{ selectedCardData?.name }}</h2>
      <p class="reading-desc">{{ selectedCardData?.description }}</p>
      <button class="close-btn" @click="closeReading">返回</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";

// 塔罗牌数据
interface TarotCard {
  name: string;
  description: string;
  color: string;
  isFlipped: boolean;
}

// 塔罗牌名称和描述
const tarotNames = [
  {
    name: "愚者",
    description: "新的开始，无畏的冒险，自由的精神，不受约束的潜力。",
  },
  { name: "魔术师", description: "创造力，技能，专注，行动，实现目标的能力。" },
  { name: "女祭司", description: "直觉，内在智慧，精神意识，神秘，内省。" },
  { name: "女皇", description: "丰收，母性，创造，美丽，滋养，自然的丰盛。" },
  { name: "皇帝", description: "权威，控制，稳定性，父爱，保护，结构。" },
  {
    name: "教皇",
    description: "传统，信仰，指导，精神启示，信仰体系，道德规范。",
  },
  { name: "恋人", description: "爱，关系，价值观，选择，和谐，对立的吸引力。" },
  { name: "战车", description: "意志力，胜利，控制，自信，决心，野心。" },
  { name: "力量", description: "勇气，力量，影响力，同情心，耐心，内在力量。" },
  { name: "隐士", description: "冥想，反思，内省，灵性追求，审慎，智慧。" },
  {
    name: "命运之轮",
    description: "变化，命运，突破，进步的机会，命运转折点。",
  },
  { name: "正义", description: "平衡，公正，诚实，真理，法律，清晰度。" },
];

// 生成渐变色彩数组
const gradientColors = [
  "linear-gradient(to right bottom, #6d327c, #485DA6, #00a1ba, #01b18e, #32b37b)",
  "linear-gradient(to right bottom, #4e54c8, #8f94fb)",
  "linear-gradient(to right bottom, #7b4397, #dc2430)",
  "linear-gradient(to right bottom, #3a7bd5, #3a6073)",
  "linear-gradient(to right bottom, #ff4e50, #f9d423)",
  "linear-gradient(to right bottom, #6a3093, #a044ff)",
  "linear-gradient(to right bottom, #36d1dc, #5b86e5)",
  "linear-gradient(to right bottom, #cb356b, #bd3f32)",
  "linear-gradient(to right bottom, #000428, #004e92)",
  "linear-gradient(to right bottom, #DD5E89, #F7BB97)",
  "linear-gradient(to right bottom, #16A085, #F4D03F)",
  "linear-gradient(to right bottom, #603813, #b29f94)",
];

// 创建塔罗牌数据
const tarotCards = reactive<TarotCard[]>(
  tarotNames.map((item, index) => ({
    name: item.name,
    description: item.description,
    color: gradientColors[index % gradientColors.length],
    isFlipped: false,
  })),
);

// 状态管理
const selectedCard = ref<number | null>(null);
const readingVisible = ref(false);

// 选中的卡片数据
const selectedCardData = computed(() => {
  if (selectedCard.value !== null) {
    return tarotCards[selectedCard.value];
  }
  return null;
});

// 选择卡片
const selectCard = (index: number) => {
  selectedCard.value = index;
  
  // 翻转卡片
  setTimeout(() => {
    tarotCards[index].isFlipped = true;
    
    // 显示卡片解读
    setTimeout(() => {
      readingVisible.value = true;
    }, 1000);
  }, 500);
};

// 关闭解读
const closeReading = () => {
  readingVisible.value = false;
  
  // 重置所有卡片
  setTimeout(() => {
    tarotCards.forEach((card) => {
      card.isFlipped = false;
    });
    selectedCard.value = null;
  }, 300);
};

// 获取卡片样式
const getCardStyle = (index: number) => {
  return {
    background: tarotCards[index].color,
  };
};
</script>

<style lang="less" scoped>
// 全局容器
.tarot-container {
  position: relative;
  min-height: 100vh;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  color: white;
  z-index: 1;
}

// 神秘背景
.mystic-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  
  .stars,
  .twinkling,
  .clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .stars {
    background: #000 
      url("")
      repeat top center;
  }
  
  .twinkling {
    background: transparent 
      url("")
      repeat top center;
    animation: move-twinkle 200s linear infinite;
  }
  
  .clouds {
    background: transparent 
      url("")
      repeat top center;
    animation: move-clouds 150s linear infinite;
  }
}

@keyframes move-twinkle {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 10000px 0;
  }
}

@keyframes move-clouds {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 10000px 0;
  }
}

// 标题样式
.tarot-title {
  color: #fff;
  text-align: center;
  font-size: 2.5rem;
  margin: 20px 0 10px;
  text-shadow: 
    0 0 10px rgba(138, 43, 226, 0.8),
    0 0 20px rgba(138, 43, 226, 0.5);
  font-family: "Times New Roman", serif;
  letter-spacing: 4px;
  animation: pulse 2s infinite alternate;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.05);
    opacity: 1;
  }
}

// 引导文字
.tarot-guide {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  text-shadow: 0 0 5px rgba(138, 43, 226, 0.5);
}

// 卡片容器
.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
  max-width: 900px;
  width: 89%;
  margin: 0 auto;
  padding: 20px;
}

// 塔罗牌样式
.tarot-card {
  perspective: 1000px;
  height: 200px;
  cursor: pointer;
  position: relative;
  transform-style: preserve-3d;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-10px);
    filter: brightness(1.2);
  }
  
  &.is-selected {
    z-index: 10;
    transform: scale(1.05);
    
    &::after {
      content: "";
      position: absolute;
      inset: -10px;
      border-radius: 12px;
      background: radial-gradient(
        circle at center,
        rgba(138, 43, 226, 0.4) 0%,
        transparent 70%
      );
      animation: select-glow 2s infinite alternate;
      z-index: -1;
    }
  }
  
  &.is-flipped .card-inner {
    transform: rotateY(180deg);
  }
}

@keyframes select-glow {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.card-back,
.card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
}

// 卡背设计
.card-back {
  background: linear-gradient(45deg, #2c0e37, #5a1846);
  display: flex;
  align-items: center;
  justify-content: center;
  
  .card-pattern {
    position: absolute;
    width: 90%;
    height: 90%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background-image: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255, 255, 255, 0.05) 10px,
      rgba(255, 255, 255, 0.05) 20px
    );
  }
  
  .card-symbol {
    position: relative;
    width: 60px;
    height: 60px;
    
    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    
    &::before {
      background: conic-gradient(
        from 0deg,
        #9c27b0,
        #673ab7,
        #3f51b5,
        #673ab7,
        #9c27b0
      );
      border-radius: 50%;
      animation: rotate 6s linear infinite;
    }
    
    &::after {
      background-image: 
        radial-gradient(
          circle at center,
          transparent 15px,
          #fff 15px,
          #fff 17px,
          transparent 17px
        ),
        radial-gradient(
          circle at center,
          transparent 25px,
          #fff 25px,
          #fff 27px,
          transparent 27px
        );
      animation: pulse-symbol 3s ease-in-out infinite alternate;
    }
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse-symbol {
  0% {
    opacity: 0.5;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1.1);
  }
}

// 卡片正面
.card-front {
  transform: rotateY(180deg);
  background: linear-gradient(45deg, #3f2b5f, #2a1b4d);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  &::before {
    content: attr(data-index);
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.9);
  }
  
  .card-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 15px;
    
    &::before {
      content: "";
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      filter: blur(10px);
    }
  }
  
  .card-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    position: relative;
    
    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
      filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
    }
  }
  
  .card-title {
    position: absolute;
    bottom: 20px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }
}

// 卡片解读面板
.card-reading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  max-width: 500px;
  background: rgba(25, 10, 41, 0.95);
  border-radius: 15px;
  padding: 30px;
  box-shadow: 
    0 0 30px rgba(138, 43, 226, 0.5),
    0 0 60px rgba(0, 0, 0, 0.5);
  z-index: 100;
  backdrop-filter: blur(10px);
  animation: fade-in 0.5s ease-out;
  
  .reading-title {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 20px;
    text-align: center;
    text-shadow: 0 0 10px rgba(138, 43, 226, 0.8);
  }
  
  .reading-desc {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 25px;
  }
  
  .close-btn {
    display: block;
    width: 120px;
    margin: 0 auto;
    padding: 10px 0;
    background: linear-gradient(135deg, #9c27b0, #673ab7);
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      background: linear-gradient(135deg, #b52cc5, #7e57c2);
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

// 移动端适配
@media (max-width: 768px) {
  .cards-container {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .tarot-title {
    font-size: 2rem;
  }
  
  .tarot-guide {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .tarot-card {
    height: 180px;
  }
  
  .card-reading {
    width: 90%;
    padding: 20px;
  }
  
  .reading-title {
    font-size: 1.5rem;
  }
  
  .reading-desc {
    font-size: 1rem;
  }
}
</style> 